<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col>
          <!-- 搜索区域 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item
              label="关键字"
              class="keyword"
              v-model="queryInfo.keyword"
            >
              <el-input
                v-model.trim="queryInfo.keyword"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" class="keyword">
              <el-select
                v-model="queryInfo.state"
                size="small"
                placeholder="请选择"
              >
                <el-option label="启用" value="0"></el-option>
                <el-option label="禁用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="btn">
              <el-button size="small" @click="removes">清除</el-button>
              <el-button type="primary" @click="onSearch" size="small"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item class="left-lf">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="dialogFormVisible = true"
                >新增技巧</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 消息提示框 -->
      <!-- :title= "`${listen}`" -->
      <el-alert
        :title="`数据一共${listen}条`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>

      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%" class="taba">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="400"
        >
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
          <span v-if="scope.row.videoURL== null"></span>
          <span @click="videobtn(scope.row.videoURL, scope.row.id)" v-else class="iconfont icon-01"></span>
        </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="120"></el-table-column>
        <el-table-column prop="username" label="录入人" width="150"></el-table-column>
        <el-table-column label="录入时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.createTime | relativeTime }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.state === 0 ? '已禁用' : '已启用' }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row.id)"
              >预览</el-button
            >
            <el-button type="text"  @click="forbiddenBtn(scope.row.id,scope.row.state)">
                {{ scope.row.state === 0 ? '启用':'禁用' }}
            </el-button>
            <el-button type="text" :disabled="scope.row.state==0" @click="modification(scope.row)"
              >修改</el-button
            >
            <el-button type="text" :disabled="scope.row.state==0" @click="deletes(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="listen"
        background
        class="paging"
      >
      </el-pagination>

      <!-- 新增技巧的弹框 -->
      <el-dialog
        title="新增文章"
        :visible.sync="dialogFormVisible"
        @closed="onClosed"
      >
        <el-form :model="bodyInfo" :rules="addFormRules" ref="ruleForm">
          <el-form-item
            label="文章标题 :"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input
              v-model="bodyInfo.title"
              autocomplete="off"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容 :" :label-width="formLabelWidth">
            <!-- <quill-editor/> -->
            <quill-editor
              v-model="bodyInfo.articleBody"
              prop="contents"
              :options="editorOption"
              @change="onEditorChange($event)"
              class="quill"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址 :" :label-width="formLabelWidth">
            <el-input
              v-model="bodyInfo.videoURL"
              autocomplete="off"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addList">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 浏览按钮的弹窗 -->
      <el-dialog title="浏览文章" :visible.sync="dualogFormBrowse" >
        <div class="bigbox" :model="particularsth">
              <h1>{{particularsth.title}}</h1>
              <span>{{particularsth.createTime | relativeTime}}</span>
              <span>{{this.username}}</span>
              <span class="iconfont icon-yanjing">{{particularsth.visits}}</span>
          <el-card>
            <el-row>
              <el-col>
                <h3 v-html="particularsth.articleBody"></h3>
                <span></span>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-dialog>

      <!-- 修改的对话框 -->
      <el-dialog title="修改文章" :visible.sync="popup">
        <el-form :model="particulars" :rules="addFormRules" ref="ruleForm">
          <el-form-item
            label="文章标题 :"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input
              v-model="particulars.title"
              autocomplete="off"
              placeholder="请输入文章标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容 :" :label-width="formLabelWidth">
            <!-- <quill-editor/> -->
            <quill-editor
              v-model="particulars.articleBody"
              prop="contents"
              :options="editorOption"
              @change="onEditorChange($event)"
              class="quill"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址 :" :label-width="formLabelWidth">
            <el-input
              v-model="particulars.videoURL"
              autocomplete="off"
              placeholder="请输入视频地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="popup = false">取 消</el-button>
          <el-button type="primary" @click="change">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 播放视频的弹出框 -->
      <el-dialog
        :visible.sync="dialogVideo"
        width="50%"
        class="videos"
      >
        <div class="videocss">
          <video
          autoplay="autoplay"
          controls="controls"
          :src="videosp"
          height="800"
          width="1000"
          ></video>
        </div>
      </el-dialog>

      <!-- 自定义播放框 -->
      <!-- <div class="videobox">
         <video
          autoplay="autoplay"
          controls="controls"
          :src="videosp"
          height="800"
          width="1000"
          ></video>
      </div> -->
    </el-card>
  </div>
</template>

<script>
import {
  getAddList,
  additionList,
  getdetailList,
  deleteList,
  compileList,
  statusList
} from '@/api/interview.js'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      formInline: {
        data: '',
        region: ''
      },
      // 请求列表的参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: ''
        // state: ''，
      },
      // 文章添加的参数
      bodyInfo: {
        // 标题
        title: '',
        // 文章正文
        articleBody: '',
        // 视频地址
        videoURL: ''
      },
      lists: {
        // 获取总记录数
        counts: 0,
        // 页大小
        pagesize: 0,
        // 总页数
        pages: 0,
        // 当前页码
        page: 0,
        // 列表
        items: [],
        // 启用或者禁用
        state: false,
        // 录入人
        creator: '',
        // 视频地址
        videoURL: '',
        // 文章正文
        articleBody: '',
        // 标题
        title: '',
        // 阅读数
        reads: '',
        // 操作
        address: ''
      },
      // 输入人
      username: '',
      // 视频
      videosp: '',
      // 存放列表的容器
      list: [],
      listen: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 定义浏览的弹窗显示与隐藏
      dualogFormBrowse: false,
      formLabelWidth: '120px',
      // 定义视频的显示与隐藏
      dialogVideo: false,
      // 添加文章标题的数据
      addTitleForm: {
        // 文章标题名称
        title: '',
        // 文章内容
        contents: ''
      },
      addFormRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, message: '不能低于3个字符', trigger: 'blur' }
        ],
        contents: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { message: '内容不得少于30个字符', trigger: 'blur' }
        ]
      },
      // 判断是禁止还是显示
      forbidden: false,
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],
            ['formula', 'image', 'video', 'clean']
          ]
        }
      },
      // 详情信息
      particularsth: {
        // 编号
        id: 0,
        // 标题
        title: '',
        // 文章正文
        articleBody: '',
        // 视频地址
        videoURL: '',
        // 阅读数
        reads: 0,
        // 状态
        state: '',
        // 录入人
        creator: ''
      },
      // 控制修改信息弹窗的显示与隐藏
      popup: false,
      particulars: ''
    }
  },
  created() {
    this.getAddLists()
  },
  watch: {
    //  注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
    pages () {
      if (this.pages === (this.page - 1) * this.pagesize && this.pages !== 0) {
        this.page -= 1
        this.getAddLists() //  获取表格数据的方法
      }
    }
  },
  methods: {
    // 获取列表数据
    async getAddLists() {
      try {
        const { data } = await getAddList(this.queryInfo)
        console.log(data, 1111)
        this.listen = data.counts
        this.list = data.items
        this.username = data.items[0].username
        // this.videosp = data.items.videoURL
        console.log(this.list, 111111111111112)
        this.$message.success('列表数据获取成功')
      } catch (err) {
        // console.log(err)
        this.$message('获取数据失败')
      }
    },
    async onSearch() {
      this.getAddLists()
    },
    // 分页功能
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getAddLists()
    },
    handleCurrentChange(newNum) {
      this.queryInfo.page = newNum
      this.getAddLists()
    },
    // 获取文章状态
    async forbiddenBtn(id, state) {
      var stId = 0
      if (state) {
        stId = 0
      } else {
        stId = 1
        if (stId === 1) {

        }
      }
      // console.log(stId)
      // this.forbidden = !this.forbidden
      try {
        const { data } = await statusList(id, stId)
        console.log(data, 11111111111111)
        this.getAddLists()
        this.$message.success('修改状态成功')
      } catch (err) {
        this.$message('修改状态失败')
      }
    },
    // 清除框里面的类容
    removes() {
      // console.log('绑定数据成功', this.formInline.data)
      // 点击清空关键字框的内容
      this.queryInfo.keyword = ''
      this.queryInfo.state = ''
    },
    onEditorChange(html) {
      console.log()
    },
    async search() {
      try {
        const { data } = await getAddList(this.pageId)
        console.log(data, 222222222222222)
      } catch (err) {
        this.$message('获取数据失败')
      }
    },
    // 文章添加
    addList() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return console.log('点击成功了')
        try {
          const { data } = await additionList(this.bodyInfo)
          console.log(data)
          this.$message.success('数据添加成功')
        } catch (err) {
          this.$message('添加数据失败')
          // console.log(err)
        }
        this.$refs.ruleForm.resetFields()
        // 点击提交之后弹出框隐藏
        this.dialogFormVisible = false
        // 刷新列表
        this.getAddLists()
      })
    },
    onClosed() {
      // console.log('close')
      this.bodyInfo.title = ''
      this.bodyInfo.videoURL = ''
      this.bodyInfo.articleBody = ''
    },
    // 获取数据详情
    async detail(id) {
      console.log(id, 99999999999999)
      this.dualogFormBrowse = true
      try {
        const { data } = await getdetailList(id)
        console.log(data, 111111111)
        this.particularsth = data
      } catch (err) {
        this.$message('获取详情失败')
        console.log(err)
      }
      // this.username = this.username
    },
    //  删除文章
    async deletes(id) {
      const confom = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confom !== 'confirm') {
        return this.$message('取消删除')
      }
      try {
        const { data } = await deleteList(id)
        console.log(data)
        this.$message.success('数据删除成功')
        // if (this.)
      } catch (err) {
        console.log('删除数据失败')
      }
      // 刷新程序重新获取
      this.getAddLists()
    },
    // 显示弹出框
    modification(row) {
      this.popup = true
      this.particulars = row
      console.log(this.particulars.id, 1111111111111111111111111)
    },
    // 修改文章
    async change(id) {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        try {
          const { data } = await compileList({
            id: this.particulars.id,
            title: this.particulars.title,
            articleBody: this.particulars.articleBody,
            videoURL: this.particulars.videoURL
          })
          this.particularsth = data
          console.log(data)
          this.$message.success('数据获取成功')
        } catch (err) {
          this.$message('修改信息失败')
        }
        this.popup = false
      })
    },
    // 点击播放视频
    videobtn (video) {
      this.videosp = video
      this.dialogVideo = true
      console.log(video, 111111111)
    }
  }
}
</script>
<style scoped lang="less">
.container {
  padding: 10px;
  .bigbox span {
    margin: 5px;
  }
  .quill {
    height: 300px;
    margin-bottom: 60px;
  }
  .demo-form-inline {
    display: flex;
  }
  .left-lf {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
  }
  .keyword {
    margin-left: 25px;
    margin-right: 30px;
  }
  .taba {
    margin-top: 15px;
  }
  .paging {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  min-height: 400px;
}
/deep/.el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background-color: #409eff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    .el-dialog__title {
      color: #fff;
    }
  }
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.el-form-item {
  font-weight: 700;
}
.el-dialog__header {
  width: 800px;
}
// /deep/.el-card__body {
//   background-color: #f5f5f5;
// }
.icon-yanjing:before {
  margin-right: 5px;
}
.icon-01:before {
   color: #0000ff;
   margin-left: 5px;
}

.videos {
  .videocss {
    video {
    width: 100%;
    height: 100%;
    }
  }
}
.el-dialog__body {
  // padding: 0;
}
// .videobox {
//   width: 800px;
//   height: 600px;
//   background-color: pink;
// }
</style>
